<template>
  <!-- 把两个事件函数分开  分别绑定移入移出事件-->
  <!-- <li
    :class="isMove ? 'active' : ''"
    @mouseenter="mouseEnterHandle"
    @mouseleave="mouseLeaveHandle"
  > -->
  <!-- 2.给li增加类名,并绑定事件 -->
  <li
    :class="isMove ? 'active' : ''"
    @mouseenter="mouseChangeHandle('enter')"
    @mouseleave="mouseChangeHandle('leave')"
  >
  <!-- 这里是只书写一个改变状态的函数,传入参数作为状态判断 -->
    <label>
      <input type="checkbox" />

      <span>{{ songName }}</span>
    </label>
    <button class="btn btn-danger">删除</button>
  </li>
  <!-- 
    鼠标悬浮在li上,li出现背景色,删除按钮显示
   绑定移入移出事件,移入时背景色出现同事删除按钮出现.
    1.给li添加一个active的类名,书写样式.
      需要进行移入移出判断,移入就添加,移出或不移入就没有,可以在data中定义初始状态
    2.点击删除按钮上的隐藏样式去掉,下方li button中本就书写有隐藏
      在style中定义移入显示的样式即可
    
     -->
</template>

<script>
export default {
  name: "Item",
  data() {
    return {
      // 1,定义初始状态 move是移入的意思
      isMove: false,
    };
  },
  props: ["id", "songName", "done"],

  methods: {
    // 通过函数传入的参数来判断,参数全等就是true
    mouseChangeHandle(type) {
      // this.isEnter = type === "enter" ? true : false;
      this.isMove = type === "enter";
    },

    //两个事件的事件函数分开的写法(入过移入,active就显示,按钮也出现)
    /* mouseEnterHandle() {
      this.isMove = true;
    },
    mouseLeaveHandle() {
      this.isMove = false;
    }, */
  },
};
</script>

<style scoped>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}

li.active {
  background: pink;
}

/* 拥有active属性的li里面的button */
li.active button {
  display: block;
}
</style>